<template>
  <div class="share-card">
    <div class="head">
      <img src="http://119.3.190.46/cjsj_img/pic/111.jpg" alt="" />
      <div>
        <div class="name">{{ uname }}</div>
        <div class="time">{{ time }}</div>
      </div>
    </div>
    <div class="contents">
      <div class="title">{{ title }}</div>
      <div class="text">
        {{ detail }}
      </div>
    </div>
    <div class="imgs">
      <img v-for="item, i in pic" :key="i" :src="item" alt="" />
    </div>

    <div class="foot">
      <div class="left">
        <van-icon size="25" name="good-job-o" />
        <van-icon size="25" name="chat-o" />
        <van-icon size="25" name="star-o" />
      </div>
      <div class="right">
        <van-icon size="25" name="ellipsis" @click="del" />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";
import httpApi from '@/http';

Vue.use(Icon);

export default {
  props: {
    uname: {
      type: String,
      default: "养胖",
    },
    headpic: {
      type: String,
      required: true,
    },
    detail: {
      type: String,
      default: "未发布内容",
    },
    pic: {
      type: Array,
      default: 0,
    },
    title: {
      type: String,
      default: "",
    },
    time: {
      type: String,
      default: "",
    },
    sid: {
      type: Number,
      default: 0,
    }
  },
  methods: {
    del() {
      this.$emit('delete')
    }
  },
};
</script>

<style lang="scss">
.share-card {
  padding: 8px;
  border-bottom: 1px solid #ddd;

  .head {
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 2px;

    >img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    >div {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0 12px;

      .name {
        font-family: "黑体";
        padding-bottom: 8px;
      }

      .time {
        color: #999;
        font-size: 12px;
        font-weight: lighter;
      }
    }
  }

  .contents {
    padding-top: 16px;

    .title {
      font-weight: 600;
      padding-bottom: 16px;
    }

    .text {
      color: #333;
    }
  }

  .imgs {
    display: flex;
    flex-wrap: wrap;
    padding: 16px 0;
    justify-content: space-between;

    img {
      width: 49%;
      object-fit: cover;
      margin-bottom: 10px;
    }
  }

  .foot {
    display: flex;
    justify-content: space-between;

    .left {
      flex: 1;
      display: flex;
      justify-content: space-between;
    }

    .right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
  }
}
.card .card-1 b, p{
  font-size: 14px;
}
</style>
